<template>
  <Dialog v-model="dialogVisible" title="人员分配详情" width="1000px">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="分配类型">
        <el-tag>{{ getTypeName(assignmentData.assignmentType) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="分配状态">
        <el-tag :type="getStatusColor(assignmentData.status)">
          {{ getStatusName(assignmentData.status) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="评价计划">
        {{ assignmentData.planName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="评价科目">
        {{ assignmentData.subjectName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="考试日期">
        {{ assignmentData.examDate || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="考试时间">
        {{ assignmentData.examTime || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="考场名称">
        {{ assignmentData.examRoom || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="考场地址">
        {{ assignmentData.examAddress || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="分配人数">
        {{ getAssignedCount() }}人
      </el-descriptions-item>
      <el-descriptions-item label="分配时间">
        {{ assignmentData.assignmentTime || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="分配人员">
        {{ assignmentData.assignedBy || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="确认状态">
        <el-tag :type="assignmentData.confirmStatus === 1 ? 'success' : 'warning'">
          {{ assignmentData.confirmStatus === 1 ? '已确认' : '待确认' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="分配备注" :span="2" v-if="assignmentData.assignmentNote">
        <div style="white-space: pre-wrap;">
          {{ assignmentData.assignmentNote }}
        </div>
      </el-descriptions-item>
    </el-descriptions>
    
    <!-- 分配人员列表 -->
    <el-divider content-position="left">分配人员列表</el-divider>
    <el-table :data="assignmentData.personnelList || []" border style="width: 100%">
      <el-table-column prop="personnelName" label="姓名" width="120" />
      <el-table-column prop="personnelCode" label="工号" width="120" />
      <el-table-column prop="personnelType" label="人员类型" width="120">
        <template #default="{ row }">
          <el-tag>{{ getPersonnelTypeName(row.personnelType) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="professionalLevel" label="专业级别" width="120" />
      <el-table-column prop="phone" label="联系电话" width="130" />
      <el-table-column prop="confirmStatus" label="确认状态" width="100">
        <template #default="{ row }">
          <el-tag :type="row.confirmStatus === 1 ? 'success' : 'warning'">
            {{ row.confirmStatus === 1 ? '已确认' : '待确认' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="confirmTime" label="确认时间" width="150" />
      <el-table-column prop="remark" label="备注" />
    </el-table>
    
    <!-- 工作安排 -->
    <el-divider content-position="left" v-if="assignmentData.workArrangements && assignmentData.workArrangements.length > 0">
      工作安排
    </el-divider>
    <el-table 
      v-if="assignmentData.workArrangements && assignmentData.workArrangements.length > 0"
      :data="assignmentData.workArrangements" 
      border 
      style="width: 100%"
    >
      <el-table-column prop="workContent" label="工作内容" />
      <el-table-column prop="workTime" label="工作时间" width="200" />
      <el-table-column prop="workLocation" label="工作地点" width="150" />
      <el-table-column prop="responsiblePerson" label="负责人" width="120" />
      <el-table-column prop="workStatus" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getWorkStatusColor(row.workStatus)">
            {{ getWorkStatusName(row.workStatus) }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 变更记录 -->
    <el-divider content-position="left" v-if="assignmentData.changeHistory && assignmentData.changeHistory.length > 0">
      变更记录
    </el-divider>
    <el-timeline v-if="assignmentData.changeHistory && assignmentData.changeHistory.length > 0">
      <el-timeline-item
        v-for="(change, index) in assignmentData.changeHistory"
        :key="index"
        :timestamp="change.changeTime"
        :type="getChangeType(change.changeType)"
      >
        <el-card>
          <h4>{{ change.changeTitle }}</h4>
          <p><strong>变更类型：</strong>{{ change.changeType }}</p>
          <p><strong>变更人：</strong>{{ change.changedBy }}</p>
          <p v-if="change.changeReason"><strong>变更原因：</strong>{{ change.changeReason }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const dialogVisible = ref(false)
const assignmentData = ref({} as any)

const getTypeName = (type: number) => {
  const typeMap = { 1: '考评员分配', 2: '监考员分配', 3: '考场分配' }
  return typeMap[type] || '-'
}

const getStatusName = (status: number) => {
  const statusMap = { 0: '待分配', 1: '已分配', 2: '已确认', 3: '已取消' }
  return statusMap[status] || '-'
}

const getStatusColor = (status: number) => {
  const colorMap = { 0: 'info', 1: 'warning', 2: 'success', 3: 'danger' }
  return colorMap[status] || 'info'
}

const getPersonnelTypeName = (type: number) => {
  const typeMap = { 1: '考评员', 2: '监考员', 3: '技术支持', 4: '管理员' }
  return typeMap[type] || '-'
}

const getWorkStatusName = (status: number) => {
  const statusMap = { 0: '未开始', 1: '进行中', 2: '已完成', 3: '已取消' }
  return statusMap[status] || '-'
}

const getWorkStatusColor = (status: number) => {
  const colorMap = { 0: 'info', 1: 'warning', 2: 'success', 3: 'danger' }
  return colorMap[status] || 'info'
}

const getChangeType = (type: string) => {
  const typeMap = { '新增': 'success', '修改': 'warning', '删除': 'danger' }
  return typeMap[type] || 'primary'
}

const getAssignedCount = () => {
  return assignmentData.value.personnelList ? assignmentData.value.personnelList.length : 0
}

const open = (data: any) => {
  dialogVisible.value = true
  assignmentData.value = data
}

defineExpose({ open })
</script> 